<template>
<div id="regist" class="regist">
    <div id="content" class="contentRegist">
        <i class="iconfont icon-right" @click='back'></i>
        <div>
            <input class="login_text" type="text" placeHolder="请输入账户名/手机号/Email" v-model="un" id="uname">
        </div>
        <div>
            <input class="login_text" type="password" placeHolder="请设置您的密码" v-model="pw" id="pwd">
        </div>
        <div class="login_btn">
            <input type="submit" value="点击注册" @click="Handler">
        </div>
    </div>  
</div>
</template>

<script>

export default {
    name:'Regist',
    data() {
        return {
            un:'',
            pw:''
        }
    },
    methods:{
        back(){
            this.$router.back();
        },
        async Handler(){
            var user= document.getElementById("uname");

           var pd=document.getElementById("pwd");
           if(user.value == " " || pd.value==""){

          alert("用户名或密码不能为空！");

           return false

        }    
           await this.$store.dispatch('Login',{
                un:this.un,
                pw:this.pw
            })
             //
            
            this.$router.push('/cinema')
             alert('注册成功')
        },
    },
}
</script>

<style scoped>
#regist{position: absolute;top:0;left:0;width:100%;z-index:999;background:#fff;min-height:100%;}
.regist{animation: slide .3s;}
@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
#content.contentRegist{ display: block; margin-bottom:0;}
.iconfont.icon-right{font-size: 30px;}
.login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_btn{ height:50px; margin:10px;}
.login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_link{ display: flex; justify-content:space-between;}
.login_link button{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;border: none;background: white;}
</style>